<template>
<div class='first-page-container'  element-loading-text="加载中..."
    element-loading-background="rgba(0, 0, 0, 0.6)"
    v-loading="loading">
  <!-- 左侧 -->
  <div class="container-wrap">
    <div class="theme-wrap" v-for="(item,index) in leftdatas" :key="index" :class="'left-bg-color'+index">
      <!-- <router-link tag="div" :to="item.url"> -->
         <div class="logo-wrap">
          <span class="logo-title">{{item.title}} <sub>[{{modelMijiDict[item.title]}}]</sub></span>
          <cite class="logo-time">{{item.time}}</cite>
        </div>
        <div class="chart-wrap">
          <div class="chart-box" v-for="(chart,index) in item.chartdatas" :key="index">
            <div class="chart-title">{{chart.title}}<span class="unit">{{chart.unit}}</span></div>
            <div class="chart-num">{{chart.num}}</div>
            <div class="chart-con">
              <p class="chart-title" v-if="chart.chartdata.title">{{chart.chartdata.title}}
                <span class="unit" v-if="chart.chartdata.unit">{{chart.chartdata.unit}}</span>
              </p>
              <div v-if="chart.type=='bar'">
                <ve-bar
                  :data="chart.chartdata.data"
                  width="100%"
                  height="100%"
                  :colors="colorlist[item.id]"
                  :settings="chart.chartSettings"
                  :extend="barLabelColor('bar',chart.dir,colorlist[item.id])"></ve-bar>
                  <!-- chart.type=='bar'?barLabelColor(colorlist[item.id]):extend -->
              </div>
              <div v-if="chart.type=='line'" style="height:180px;">
                <ve-line
                :data="chart.chartdata.data"
                width="100%"
                height="100%"
                :colors="colorlist[item.id]"
                :extend="chart.type=='line'? linearColor(colorlist[item.id]):extend"
                :settings="chart.chartSettings"
                ></ve-line>
              </div>
            </div>
          </div>
        </div>
      <!-- </router-link> -->
    </div>

  </div>
   <!-- 地图-->
  <div class="map-box">
     <!-- 地图区域 -->
    <div class='container'>
      <div
        class="mapbtn"
        v-for="(item,index) in mapbtns"
        :key="index"
        :class="index==curbtn?'active':''"
        @click="siwtchData(index)">{{item.name}}</div>
      <div class='mychart' id='mychart'></div>
      <div class='mychart2' id='mychart2'></div>
      <div class="map-title">总体工作情况</div>
    </div>
    <div class="regionInfo">
      <div class="title"><img src="../../assets/images/themeguide/map_menu.png"/><span>{{mapinfos.title}}完成情况</span></div>
      <div class="con">
        <div class="con-index" v-for="(list,index) in mapinfos.conlists">{{list.name}}：{{list.unit}}</div>
      </div>
    </div>
  </div>
  <!-- 右侧 -->
  <div class="container-wrap">
    <div class="theme-wrap" v-for="(item,index) in rightdatas" :key="index" :class="'right-bg-color'+index">
      <!-- <router-link tag="div" :to="item.url"> -->
        <div class="logo-wrap">
          <span class="logo-title">{{item.title}} <sub>[{{modelMijiDict[item.title]}}]</sub></span>
          <cite class="logo-time">{{item.time}}</cite>
        </div>
        <div class="chart-wrap">
          <div class="chart-box" v-for="(chart,index) in item.chartdatas" :key="index">
            <div class="chart-title">{{chart.title}}<span class="unit">{{chart.unit}}</span></div>
            <div class="chart-num">{{chart.num}}</div>
            <div class="chart-con">
              <p class="chart-title" v-if="chart.chartdata.title">{{chart.chartdata.title}}
                <span class="unit" v-if="chart.chartdata.unit">{{chart.chartdata.unit}}</span>
              </p>
              <div v-if="chart.type=='bar'">
                <ve-bar
                  :data="chart.chartdata.data"
                  width="100%"
                  height="100%"
                  :colors="colorlist[item.id+2]"
                  :extend="barLabelColor('bar',chart.dir,colorlist[item.id+2])"></ve-bar>

                  <!-- barFConfigFunc('bar',chart.dir) -->
                  <!-- chart.type=='bar'?barConfig:extend -->
                  <!-- chart.type=='bar'?barLabelColor(colorlist[item.id]):extend -->
              </div>

              <div v-if="chart.type=='line'" style="height:180px;">
                <ve-line
                  :data="chart.chartdata.data"
                  width="100%"
                  height="100%"
                  :colors="colorlist[item.id+2]"
                  :extend="extend"
                  :settings="chart.chartSettings"
                  ></ve-line>
              </div>

              <div v-if="chart.type=='ring'">
                <ve-pie
                  :data="chart.chartdata.data"
                  width="100%"
                  height="100%"
                  :colors="colorlist[item.id+2]"
                  :extend="extend"
                  :settings="chart.chartSettings"></ve-pie>
              </div>
            </div>
          </div>
        </div>
      <!-- </router-link> -->
    </div>
  </div>

</div>
</template>

<script>
import echarts from 'echarts'
import qs from 'qs'
import ImpBorder from '@/components/ImpBorder'
import { datalists, baseConfig, arealineConfig, barConfig, barFConfig } from '@/modules/GuideChartConfig'
// import {mapSourceData, regionInfos} from '@/utils/mapdata'
import 'echarts/map/js/province/beijing.js'
import regionCenters from '@/utils/regionCenters'
export default {
  name: 'firstPageContainer',
  components: {
    ImpBorder
  },
  data () {
    return {
      mapbtns: [
        { name: '用地腾退完成情况' },
        { name: '违建拆除完成情况' }
      ],
      loading: false,
      leftdatas: [],
      rightdatas: [],
      mainChart: null,
      subChart: null,
      dataTypes: ['ttyd', 'wjcc'],
      curDataType: 'ttyd',
      curSelectedName: '门头沟区',
      // 地图按钮状态
      curbtn: 0,
      // 地图数据
      mainMapData: { 'ttyd': [], 'wjcc': [] },
      regionInfos: null,
      // 地图列表信息
      mapinfos: {
        'title': '门头沟区',
        'conlists': [
          {
            'name': '用地腾退',
            'unit': '123.52公顷'
          },
          {
            'name': '实施进度',
            'unit': '617.6%'
          },
          {
            'name': '违建拆除',
            'unit': '96.98万平方米'
          },
          {
            'name': '疏解居住人口',
            'unit': '-0.54万人'
          },
          {
            'name': '疏解就业人口',
            'unit': '-0.19万人'
          },
          {
            'name': '疏解转移企业',
            'unit': '-647家'
          }
        ]
      },
      modelMijiDict:{"用地腾退":"机密","违建拆除":"机密","人口疏解":"机密","产业提质":"机密"}
    }
  },
  computed: {
    // apiuirl
    curApiUrl () {
      return this.$store.getters.curApiUrl
    },
    colorlist () {
      return this.$store.state.colorParams.colorlist
    },
    extend () {
      return baseConfig
    },
    arealineConfig () {
      return arealineConfig
    },
    // 正数条形
    barConfig () {
      return barConfig
    },
    // 针对负数
    barFConfig () {
      return barFConfig
    }
    // 测试数据
    // leftdatas(){
    //   return datalists.leftdatas
    // },
    // rightdatas(){
    //   return datalists.rightdatas
    // }
  },
  watch: {
    curDataType (newVal) {
      let curData = this.mainMapData[newVal]
      this.mapChart(this.mainChart, 1, [], curData)
      this.mapChart(this.subChart, 16, [116.389, 39.921], curData)
      this.switchDataSort(this.curDataType)
    },
    curSelectedName (newName, oldName) {
      this.highLightFeature(newName, oldName)
    }
  },
  methods: {
    // 条形图 负数 正数
    barFConfigFunc (type, dir) {
      let barinfo = ''
      let that = this
      if (type == 'bar') {
        if (dir == 'F') {
          barinfo = this.barFConfig
        } else {
          barinfo = this.barConfig
        }
      } else {
        barinfo = this.extend
      }
      return barinfo
    },
    // 折线动态颜色
    linearColor (color_list) {
      let temp = Object.assign({}, this.arealineConfig, {
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            offset: 0.3,
            color: color_list[0]
          }, {
            offset: 1,
            color: 'rgba(255, 255, 255, .1)'
          }])
        },
        grid: {
          top: 15,
          bottom: 15,
          left: 15,
          right: 10
        },
        tooltip: {
          show: false
        }
      })
      return temp
    },
    // 条形图文本动态颜色
    barLabelColor (type, dir, color_list) {
      let barinfo = ''
      if (type == 'bar') {
        if (dir || dir == 'F') {
          barinfo = this.barFConfig
        } else {
          barinfo = this.barConfig
        }
      } else {
        barinfo = this.extend
      }
      let temp = Object.assign({}, barinfo, {
        series: {
          label: {
            normal: {
              show: true,
              color: color_list[0],
              position: 'right'
            }
          },
          barWidth: '60%'
        },
        tooltip: {
          show: false
        }
      })
      return temp
    },
    // 交换用地腾退与拆违实施量的顺序
    switchDataSort (curDataType) {
      let curItemName = curDataType == 'ttyd' ? '用地腾退' : '违建拆除'
      let curItemProcessor = curDataType == 'ttyd' ? '腾退实施进度' : '拆违实施进度'
      if (this.mapinfos.conlists[0].name == curItemName) {
        this.mapinfos.conlists[1].name = curItemProcessor
      } else {
        [this.mapinfos.conlists[0], this.mapinfos.conlists[2]] = [this.mapinfos.conlists[2], this.mapinfos.conlists[0]]
        let values = this.mainMapData[curDataType].filter((item) => {
          return item.name == this.mapinfos.title
        })
        this.mapinfos.conlists[1] = { name: curItemProcessor, unit: values[0].value + '%' }
      }
    },
    // 地图数据格式化
    mapDataFormat (data) {
      let ttydData = []
      let wjccData = []
      let nTData = data['ttyd']
      let nWData = data['wjcc']
      let qx_dict = regionCenters['110000']
      for (let i = 0; i < nTData.length; i++) {
        let curRegion1 = qx_dict[nTData[i].regioncode]
        let curRegion2 = qx_dict[nWData[i].regioncode]
        let ttyd = nTData[i].value
        let wjcc = nWData[i].value
        ttydData.push({
          name: curRegion1.name,
          value: ttyd,
          lng: curRegion1.lng,
          lat: curRegion1.lat
        })
        wjccData.push({
          name: curRegion2.name,
          value: wjcc,
          lng: curRegion2.lng,
          lat: curRegion2.lat
        })
      }
      // 排序
      ttydData.sort((a, b) => {
        return b.value - a.value
      })
      wjccData.sort((a, b) => {
        return b.value - a.value
      })
      for (let i = 0; i < ttydData.length; i++) {
        if (i < 5) {
          ttydData[i].rank = 1
          wjccData[i].rank = 1
        } else if (i >= ttydData.length - 5) {
          ttydData[i].rank = 3
          wjccData[i].rank = 3
        } else {
          ttydData[i].rank = 2
          wjccData[i].rank = 2
        }
      }
      let mapData = { 'ttyd': ttydData, 'wjcc': wjccData }
      return mapData
    },
    highLightFeature (newName, oldName) {
      // 点击某区划高亮
      // 方法一 重置option
      // console.log(e.name)
      // let option = self.mainChart.getOption()
      // option.geo[1].regions= [{
      //     name: e.name,
      //     selected:true,
      // }]
      // self.mainChart.setOption(option)
      // 方法二 不重置option,通过dispatchAction提交参数
      if (oldName) {
        this.mainChart.dispatchAction({
          type: 'geoUnSelect',
          seriesIndex: 1,
          name: oldName
        })
      }
      this.mainChart.dispatchAction({
        type: 'geoSelect',
        seriesIndex: 1,
        name: newName
      })
      let result = this.regionInfos.filter((item) => {
        return item.title == newName
      })
      if (result.length > 0) {
        this.mapinfos = result[0]
        this.switchDataSort(this.curDataType)
      } else {
        this.mapinfos = {
          title: newName,
          conlists: [
            { name: '用地腾退', unit: '暂无数据' },
            { name: '实施进度', unit: '暂无数据' },
            { name: '违建拆除', unit: '暂无数据' },
            { name: '疏解居住人口', unit: '暂无数据' },
            { name: '疏解就业人口', unit: '暂无数据' },
            { name: '疏解转移企业', unit: '暂无数据' }
          ]
        }
      }
    },
    // 切换地图上腾退与拆违数据
    siwtchData (val) {
      this.curbtn = val
      this.curDataType = this.dataTypes[val]
    },
    // echarts地图展示
    mapChart (mychart, zoom, center, areaData) {
      let convertFormat = function (data) {
        let seriesData = []
        for (let i = 0; i < data.length; i++) {
          let item = data[i]
          seriesData.push({
            name: item.name,
            value: [item.lng, item.lat, item.value, item.rank]
          })
        }
        return seriesData
      }

      let curOption = mychart.getOption()
      if (!curOption) {
        // 监听屏幕变化自动缩放图表
        window.addEventListener('resize', function () {
          mychart.resize()
        })
        var levelColorMap = {
          1: 'rgba(241, 109, 115, .8)',
          2: 'rgba(255, 235, 59, .7)',
          3: 'rgba(147, 235, 248, 1)'
        }

        // 绘制图表
        let option = {
          backgroundColor: 'transparent',
          // 图表主标题
          title: {
            // 文本
            // text: '北京',
            // 值: 'top', 'middle', 'bottom' 也可以是具体的值或者百分比
            top: 25,
            // 值: 'left', 'center', 'right' 同上
            left: 'center',
            // 文本样式
            textStyle: {
              // 字体大小
              fontSize: 25,
              // 字体粗细
              fontWeight: 650,
              // 字体颜色
              color: '#fff'
            }
          },
          // // 提示框组件
          // tooltip: {
          //   // 触发类型, 数据项图形触发
          //   trigger: 'item',
          //   // 使用函数模板，传入的数据值 ——> value: number | Array
          //   formatter: function (val) {
          //     return val.data.name + '<br>人口数量: ' + val.data.value + '万'
          //   }
          // },
          // legend: [{
          //     orient: "horizontal", // 'vertical'
          //     x: '80px',
          //     y: '595px', // 'ce
          //     itemWidth: 0,
          //     itemHeight: 0,
          //     data: ["实施进度"],
          //     selectedMode: false, //取消图例上的点击事件
          //     textStyle: {
          //       fontSize: 14,
          //       color: '#fff'
          //     }
          // }],
          // // // 视觉映射组件
          visualMap: {
            min: 10,
            max: 400,
            left: '40px',
            show: zoom == 1,
            text: ['', '    实施进度'],
            showLabel: !0,
            color: ['#50a3ba', '#eac736', '#d94e5d'],
            textStyle: {
              color: '#fff'
            },
            inverse: true,
            pieces: [
              { gt: 0, lte: 1, label: '前五名', symbol: 'circle', color: '#50a3ba' },
              { gt: 1, lte: 2, label: '居中', symbol: 'circle', color: '#eac736' },
              { gt: 2, lte: 3, label: '后五名', symbol: 'circle', color: '#d94e5d' }
            ]
          },
          geo: [
            {
              show: true,
              map: '北京边界',
              zoom: zoom,
              center: center,
              roam: false,
              geoIndex: 0,
              // regions: [{
              //   selected: false,
              // }],
              silent: true, // 图形是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件
              label: {
                normal: {
                  show: false
                },
                emphasis: {
                  show: false
                }
              },
              // roam: false,//地图设置不可拖拽，固定的
              itemStyle: {
                normal: {
                  areaColor: 'transparent', // '#031525',
                  borderColor: 'rgba(2,139,211,1)', // '#154e90',
                  borderWidth: 2,
                  shadowColor: '#0605B5', // 'rgba(2,139,211,1)',
                  shadowBlur: 8,
                  shadowOffsetX: 5,
                  shadowOffsetY: 10
                },
                emphasis: {
                  opacity: 0,
                  areaColor: '#389BB7', // 'transparent',//
                  borderWidth: 0
                }
              }
            },
            {
              show: true,
              map: '北京',
              zoom: zoom,
              center: center,
              roam: false,
              geoIndex: 1,
              label: {
                normal: {
                  show: false,
                  textStyle: {
                    color: '#fff',
                    fontSize: '12'
                  }

                },
                emphasis: {
                  show: false,
                  textStyle: {
                    color: '#fff',
                    fontSize: '12'
                  }
                }
              },
              itemStyle: {
                normal: {
                  areaColor: 'transparent', // '#1D346F',
                  borderColor: 'rgba(2,139,211,1)', // '#154e90',
                  borderWidth: 2
                  // shadowColor: '#D79D3D',
                },
                emphasis: {
                  areaColor: '#389BB7',
                  borderWidth: 0,
                  label: {
                    show: false
                  }
                }
              }
            }],
          series: [
            {
              name: '实施进度',
              type: 'effectScatter',
              coordinateSystem: 'geo',
              zoom: zoom,
              // symbol: 'diamond',
              showEffectOn: 'render',
              // rippleEffect: {
              //     period: 15,
              //     scale: 6,
              //     brushType: 'fill'
              // },
              hoverAnimation: true,
              itemStyle: {
                normal: {
                  color: function (params) {
                    return levelColorMap[params.value[3]]
                  },
                  shadowBlur: 10,
                  shadowColor: '#333'
                }
              },
              label: {
                normal: {
                  show: true,
                  textStyle: {
                    color: '#fff',
                    fontSize: '14'
                  },
                  // position: 'top',
                  formatter: function (params) {
                    if (zoom == 1 && (params.name == '西城' || params.name == '东城')) {
                      return ' '
                    } else {
                      // if(params.name == '西城'|| params.name == '东城'){
                      //   return params.value[2].toFixed(0) + "%\n\r\n\r"+params.name
                      // }else{
                      //   return params.value[2] + "%\n\r\n\r"+params.name
                      // }
                      if (params.value[2]) {
                        return params.value[2] + '%\n\r\n\r' + params.name
                      } else {
                        return params.value[2] + '\n\r\n\r' + params.name
                      }
                    }
                  }
                },
                emphasis: {
                  show: true,
                  textStyle: {
                    color: '#fff',
                    fontSize: '12'
                  }
                }
              },
              data: convertFormat(areaData)
            }]
        }
        mychart.setOption(option)
      } else {
        curOption.series[0].data = convertFormat(areaData)
        mychart.setOption(curOption)
      }
    },
    // echarts地图初始化
    InitEchartsMap () {
      // 基于准备好的dom，初始化echarts实例
      this.mainChart = echarts.init(document.getElementById('mychart'))
      this.subChart = echarts.init(document.getElementById('mychart2'))
      let curData = this.mainMapData[this.curDataType]
      this.mapChart(this.mainChart, 1, [], curData)
      this.mapChart(this.subChart, 16, [116.389, 39.921], curData)
      // 默认门头沟区为选中状态
      this.highLightFeature(this.curSelectedName, '')
      let self = this
      this.mainChart.on('click', function (e) {
        self.curSelectedName = e.name
      })
      this.subChart.on('click', function (e) {
        self.curSelectedName = e.name
      })
    },
    reSize () {
      let screenWidth = document.body.clientWidth
      let mychart2 = document.getElementById('mychart2')
      mychart2.style.width = screenWidth > 3200 ? '10%' : '20%'
    }
  },
  mounted () {
    if(localStorage.getItem('model')){
      let mijiDic = {1:"机密",2:"秘密",3:"内部"}
      let modelDict = {1:"用地腾退",2:"违建拆除",3:"人口疏解",4:"产业提质"}
      let model = JSON.parse(localStorage.getItem('model'))
      let keys = Object.keys(model)
      for(let i=0;i<keys.length; i++){
        this.modelMijiDict[modelDict[i+1]] = mijiDic[model[i+1]]
      }
    }
    this.loading = true
    const self = this
    const curApiUrl = this.$store.getters.curApiUrl
    this.$axios.get(`${curApiUrl}/api/guide`).then(res => {
      self.leftdatas = res.data.leftdatas
      self.rightdatas = res.data.rightdatas
      self.regionInfos = res.data.mapinfos
      // 格式化地图数据
      self.mainMapData = self.mapDataFormat(res.data.mapSourceData)
      self.InitEchartsMap()
      self.loading = false
    })
    this.reSize()
    window.onresize = () => {
      return (() => {
        this.reSize()
      })()
    }

    // 对接分保
    let curBrower = ''
    let userAgent = navigator.userAgent // 取得浏览器的userAgent字符串
    let isOpera = userAgent.indexOf('Opera') > -1
    if (userAgent.indexOf('Firefox') > -1) { // 判断是否Firefox浏览器
      curBrower = '火狐浏览器'
    }

    if (userAgent.indexOf('Chrome') > -1) { // 判断是否Chrome浏览器
      curBrower = '谷歌浏览器'
    }
    if (userAgent.indexOf('compatible') > -1 && userAgent.indexOf('MSIE') > -1 && !isOpera) { // 判断是否IE浏览器
      curBrower = 'IE浏览器'
    };

    this.$axios.post(window.appcfg.fbServer + '/databi/log/save2', qs.stringify({
      username: localStorage.getItem('name'),
      department: '系统管理',
      uid: localStorage.getItem('uid'),
      state: 0,
      model: '2',
      modelname: this.$route.meta.name,
      content: '页面浏览',
      devicename: curBrower,
      kind: '0',
      level: '6'
    })).then(res => {
      console.log(res)
    })
  }
}
</script>
<style lang='stylus' scoped>
.first-page-container
  width 100%
  height 100%
  display flex
  flex-flow row nowrap
  justify-content space-between

  .container-wrap
    width 595px
    @media screen and (min-width: 2000px)
      width 50%

    height 100%
    display flex
    flex-flow column nowrap
    justify-content space-around
    margin 0 10px 0 15px
    .theme-wrap
      height 415px
      background url('../../assets/images/themeguide/themeborder.png') no-repeat center
      background-size 100% 100%
      cursor pointer
      padding 15px 0 0 15px
      &:first-child
        margin-bottom 10px
      // 标题box
      .logo-wrap
        width 100%
        height 50px
        .logo-title
          font-size 18px
          font-weight bold
          margin-left 60px
        .logo-time
          font-style normal
          font-size 14px
          margin-top 15px
          font-family "楷体"
          color #999
          margin-left 15px
      // 图表box
      .chart-wrap
        display flex
        justify-content space-around
        .chart-box
          width 48%
          height 100%
          .chart-title
            text-align center
            font-size 16px
            font-weight 600
          .chart-num
            font-size 38px
            line-height 50px
            text-align center
            font-weight bold
          .chart-con
            width 100%
            height 213px
            > div
              width 100%
              height 100%

  .map-box
    width calc(100vw - 1190px - 10px)
    height 100%
    .regionInfo
      width 96%
      height 150px
      padding 10px
      margin 13px 0 0 15px
      background:url('../../assets/images/themeguide/map_border.png') no-repeat
      background-size 99% 170px
      .title
        height 50px
        line-height 50px
        font-weight bold
        text-align left
        padding:0 20px;
        img
          display inline-block
          width 47px
          height 48px
        span
          font-size 25px
          margin-left 15px
      .con
        display flex
        justify-content space-around
        flex-wrap wrap
        height 100px
        margin 15px 0
        // padding 0 20px 0 30px
        .con-index
          background url('../../assets/images/themeguide/map_list.png') no-repeat
          font-size 10px
          font-weight bold
          color #E8E8E8
          width 185px
          height 34px
          line-height 34px
          text-align center

.left-bg-color0
  .logo-wrap
    background url('../../assets/images/themeguide/logo_land.png') no-repeat
.left-bg-color1
  .logo-wrap
    background url('../../assets/images/themeguide/logo_implet.png') no-repeat
.right-bg-color0
  .logo-wrap
    background url('../../assets/images/themeguide/logo_people.png') no-repeat
.right-bg-color1
  .logo-wrap
    background url('../../assets/images/themeguide/logo_industry.png') no-repeat

.left-bg-color0
  .chart-num
    color #ffeb3b

.left-bg-color1
  .chart-num
    color #e91e63
.right-bg-color0
  .chart-num
    color #009688
.right-bg-color1
  .chart-num
    color #00bcd4

.container {
    width: 100%;
    height: 74.5%;
    position:relative;
  }
  .container .mychart {
    width: 100%;
    height: 100%;
    border: 0px solid #aeaeae;
    margin:  0px 0px 0;
  }
  .container .mychart > div  {
    width: 100%;
    height: 100%;
  }
  .container .mychart2 {
    width: 10%;
    height: 120px;
    border: 2px solid #031b6b;
    margin: 0px 0px 0;
    position: absolute;
    right: 30px;
    bottom: 6px;
  }
  // .regionInfo {
  //   width: 676px;
  //   height: 124px;
  //   position: absolute;
  //   border: 2px solid #052882;
  //   // margin: 590px 20px;
  // }
// 地图按钮
.mapbtn{
  position:absolute;
  z-index:20;
  left:20px;
  // width:148px;
  // height:32px;
  width:190px;
  height:40px;
  line-height:40px;
  text-align:center;
  fonts-size:10px;
  font-weight:bold;
  color:#E8E8E8;
  background:url('../../assets/images/themeguide/btn.png') no-repeat;
  background-size:190px 40px;
}
.mapbtn:first-child{
  top:80px;
}
.mapbtn:nth-child(2){
  top:130px;
}
.mapbtn.active,.mapbtn:hover{
  background:url('../../assets/images/themeguide/btn_active.png') no-repeat
  cursor:pointer;
   width:190px;
  height:40px;
  line-height:40px;
  background-size:190px 40px;
}
.map-title{
  background:url('../../assets/images/themeguide/map_title.png') no-repeat;
  height:39px;
  width:614px;
  position:absolute;
  top:0;
  left:50%;
  margin-left:-307px;
  text-align:center;
  font-size:22px;
  font-weight:bold;
  letter-spacing:1px;
}
sub{
    bottom: 0em;
}
</style>
